<template>
  <div class="user">
    <div class="arc">
      <van-image
        class="tx"
        round
        width="80px"
        height="80px"
        src="https://img.yzcdn.cn/vant/cat.jpeg"
      />
    </div>

    <van-panel>
      <template #header></template>
      <van-grid :border="false" column-num="3">
        <van-grid-item text="累计收益(元)">
          <template #icon><div class="score">0</div></template>
        </van-grid-item>
        <van-grid-item text="即将到账(元)">
          <template #icon><div class="score">12.21</div></template>
        </van-grid-item>
        <van-grid-item text="我的积分(个)">
          <template #icon><div class="score">423</div></template>
        </van-grid-item>
      </van-grid>
    </van-panel>

    <van-panel>
      <template #header>
        <div class="van-cell van-panel__header" @click="toUserOrder('0')">
          <div class="van-cell__title">
            <span>我的订单</span>
          </div>
          <div class="van-cell__value">
            <span>查看全部<van-icon name="arrow" /></span>
          </div>
        </div>
      </template>
      <van-grid :border="false">
        <van-grid-item icon="orders-o" text="全部" @click="toUserOrder('0')" />
        <van-grid-item icon="bill-o" text="即将到账" @click="toUserOrder('1')" />
        <van-grid-item icon="completed" text="已到账" @click="toUserOrder('2')" />
        <van-grid-item icon="failure" text="无效订单" @click="toUserOrder('3')" />
      </van-grid>
    </van-panel>

    <van-cell-group class="user-group">
      <van-cell icon="records" title="关联丢失订单" is-link />
    </van-cell-group>

    <!-- <van-cell-group> -->
      <!-- <van-cell icon="points" title="我的积分" is-link /> -->
      <!-- <van-cell icon="coupon-o" title="我的优惠券" is-link /> -->
      <!-- <van-cell icon="gift-o" title="我收到的礼物" is-link /> -->
    <!-- </van-cell-group> -->
  </div>
</template>

<script>
import {
  Row,
  Col,
  Icon,
  Cell,
  CellGroup,
  Grid,
  GridItem,
  Image,
  Panel
} from "vant";

export default {
  name: "User",
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
    [Panel.name]: Panel
  },
  methods: {
    toUserOrder(name) {
      this.$router.push({
        name: "UserOrder",
        params: {
          selected: name
        }
      });
    }
  }
};
</script>

<style scoped>
.user {
  height: 100%;
  background-color: #eee;
}

.score {
  color: red;
  font-size: 15px;
  padding-bottom: 4px;
}

.tx {
  margin-top: 30px;
  box-shadow: 0px 0px 10px 10px #ffffff;
}

.arc {
  text-align: center;
  width: 100%;
  height: 150px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.arc::after {
  content: "";
  width: 140%;
  height: 150px;
  position: absolute;
  left: -20%;
  top: 0;
  z-index: -1;
  border-radius: 0 0 50% 50%;
  background: #ff3030;
}

.user-group {
  margin-bottom: 15px;
}

.van-panel {
  margin: 10px;
  background-color: white;
  border-radius: 10px;
}

.van-panel__header {
  background-color: transparent;
}
.van-panel__content {
  background-color: transparent;
  padding: 0 10px;
}
.van-hairline--top-bottom::after {
  border-width: 0;
}
</style>
